<script lang="ts">
import Vue from 'vue'
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {getTypeImage} from "@/utils/utils";
import {mapState} from "vuex";
import {cancelPrintTask} from "@/services/liank";

export default Vue.extend({
  name: "print_loading",
  components: {NavBar},
  data() {
    return {
      type: 0,
      printParams: {},
      orderId: null,
    }
  },
  computed: {
    ...mapState(["printer", "store"]),
    ...mapState('printFile', ['loadingParams']),
    lang(): any {
      return this.$t('print_loading');
    }
  },
  onLoad(options: any) {
    const {order_id, type, print_params} = JSON.parse(decodeURIComponent(options.params));

    console.log(print_params)
    this.type = type;
    this.orderId = order_id || null

    this.printParams = print_params
    this.checkPrintStatus()
  },
  destroyed() {
    if (this.orderId) {
      this.$store.dispatch("printFile/clearInterval")
    }
  },
  methods: {
    getTypeImage,
    // 状态监听
    async checkPrintStatus() {
      const {printParams, orderId, lang} = this;
      console.log("print_loading.vue 发送任务监控", printParams, orderId, lang)
      await this.$store.dispatch("printFile/monitorPrintTask", {printParams, orderId, lang});
    },
    // 打印预览退出
    async exitPrinterLoading() {
      const {deviceId, deviceKey, devicePort, taskId} = this.printParams;
      const res = await cancelPrintTask(deviceId, deviceKey, devicePort, taskId)
      console.log(res)
      uni.navigateBack()
    },
    // 返回
    onBack() {
      uni.navigateBack()
    },
    // 返回首页
    onHome() {
      uni.switchTab({url: '/pages/index/index'})
    }
  }
})
</script>

<template>
  <view>
    <nav-bar :is-back-icon="false" :page-title="orderId ? lang.page_name_print : lang.page_name_preview "/>
    <view :class="['padding-40','flex-column', locale]">
      <view
          :class="['card flex-center', 'gap-20', loadingParams.isRefund === 2 ? 'color-red' : 'color-blue']">
        <u-icon :name="loadingParams.isRefund === 2 ? 'close-circle' : 'checkmark-circle'"
                :color="loadingParams.isRefund === 2 ? '#ff0000' : '#007aff'" size="34px"/>
        <view class="text-36 line-height-one-six">
          {{
            loadingParams.isRefund === 0 ? lang.status_success : (loadingParams.isRefund === 1 ? lang.print_success : lang.status_file)
          }}
        </view>
      </view>

      <!-- 打印状态和 打印任务-->
      <view class="card column gap-20 text-34">
        <view class="flex-between">
          <view>{{ orderId ? lang.print_state : lang.preview_state }}</view>
          <u-loading-icon v-if="!loadingParams.printerState" color="#007aff" :show="true"/>
          <u-icon v-else :name="loadingParams.isRefund === 2 ? 'close' : 'checkmark'"
                  :color="loadingParams.isRefund === 2 ? '#ff0000' : '#007aff'" size="24"/>
        </view>
        <view class="line"/>
        <view class="flex-between">
          <view>{{ orderId ? lang.print_task : lang.preview_task }}</view>
          <view>{{ loadingParams.title }}</view>
        </view>
      </view>

      <!-- 打印失败-->
      <view v-if="loadingParams.isRefund === 2" class="card text-34">
        <view class="flex-between gap-20">
          <view>{{ lang.fail_reason_title }}</view>
          <view class="flex-1">{{ loadingParams.failReason }}</view>
        </view>
        <view v-if="orderId">
          <view class="margin-tb-20">
            <view class="line"/>
          </view>
          <view class="color-red">{{ lang.automatic_refund }}</view>
        </view>
      </view>

      <view class="card text-34">
        <view class="margin-bottom-40">{{ orderId ? lang.print_content : lang.preview_content }}</view>
        <view class="flex-column gap-20">
          <!-- 格式等等-->
          <view class="flex-center gap-20">

            <view :class="['padding-30 radio-20 center type', getTypeImage(printParams.ext)]">
              <image :src="`/static/ext/${getTypeImage(printParams.ext)}.svg`"
                     style="width: 108rpx; height: 108rpx;"/>
            </view>

            <view class="flex-column gap-20">
              <view>{{ lang.map_name[type] }}</view>
              <!-- 打印格式-->
              <view class="flex-center wrap gap-20">
                <view class="label">{{ lang.print_tag[printParams.dmPaperSize] }}</view>
                <view class="label">{{ lang.print_tag[printParams.dmOrientation] }}</view>
                <view v-if="printParams.dmColor === 2" class="label">{{ otherLang.color }}</view>
              </view>

              <view>{{ printParams.dmCopies }} {{ lang.share }}</view>
            </view>
          </view>

          <view class="line"/>
          <view class="flex-center">
            <view class="flex-1">{{ lang.store_name }}</view>
            <view class="flex-2">{{ store.name }}
            </view>
          </view>
          <view class="flex-center">
            <view class="flex-1">{{ lang.printer_name }}</view>
            <view class="flex-2">{{ printer.drivce_name }}
            </view>
          </view>
        </view>
      </view>

      <!-- 返回首页-->
      <view class="margin-top-40 text-34">
        <!-- 关闭预览-->
        <u-button
            v-if="!orderId && loadingParams.isRefund === 0" shape="circle" @click="exitPrinterLoading" size="large"
            color="#7d7d7d" :plain="true" :customStyle="{borderStyle:'none'}">{{ lang.cancel_preview }}
        </u-button>

        <!-- 失败！-->
        <u-button
            v-if="loadingParams.isRefund === 2" shape="circle" @click="onBack" size="large"
            color="#1073FF" :customStyle="{borderStyle:'none'}">{{ otherLang.back }}
        </u-button>

        <!-- 成功 返回首页-->
        <u-button
            v-if="orderId" shape="circle"
            :customStyle="{boxShadow: loadingParams.printerState ? '0 0 36rpx 12rpx #e6e6e6' : ''}"
            :disabled="!loadingParams.printerState" @click="onHome" size="large" color="#1073FF">
          {{ lang.on_home }}
        </u-button>
      </view>
    </view>
  </view>

</template>

<style scoped lang="scss">
.label {
  padding: 2px 6px;
  border-radius: 14rpx;
  border: 1rpx solid #5493fb;
  color: #0186FF;
  background: white;
  font-size: 24rpx;
  font-weight: 300;
}

</style>